{% extends common/base_simple.html %}

<!-- 
@since 2017/12/02
@modified 2018/11/05 01:27:23
-->

{% block head %}
<style type="text/css">

.char {
    font-size: 12px;
    width: 14px;
    height: 14px;
    float: left;
    display: block;
}

.reader-header {
    position: fixed;
    top: 0px;
    height: 30px;
    width: 100%;
    background-color: #ccc;
}

.reader-footer {
    position: fixed;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background-color: #ccc;
}

#content {
    padding-bottom: 30px;
    padding-left: 5px;
    padding-right: 5px;
}

#progress {
    position: absolute;
    left: 50%;
    margin-left: -30px;
    width: 60px;
    text-align: center;
}

.forward {
    position: absolute;
    right: 0px;
}

.read {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #ccc;
    cursor: pointer;
    border-radius: 5px;
    opacity: 0.8;
}

.read:hover {
    opacity: 1.0;
}

</style>
{% end %}

{% block body %}
{% set path = xutils.get_argument("path") %}
{% include mod_fs_path.html %}
<div class="col-md-12 hide" style="text-align: center;">
    <button class="backward" style="float: left;">上一页</button>
    <span style="text-align: center;"><button class="read">阅读</button></span>
    <button class="forward" style="float: right;">下一页</button>
</div>

<div class="col-md-12 card" id="content"></div>

<span class="read">阅读</span>

<div class="col-md-12 reader-footer" style="text-align: center;">
    <button class="backward float-left">上一页</button>
    <button id="progress"></button>
    <button class="forward">下一页</button>
</div>

<script type="text/javascript">
    var path = getUrlParams().path;
    var _from = getUrlParams().from;
    var autoForward = false;
    var readLength = 1000;

    $("#backLink").attr("href", _from);

    function readbook(direction, read) {
        $.get("/api/readbook", {path: path, read: "false", direction: direction, length: readLength}, function (resp) {
            var text = resp.data;
            // 显示阅读内容
            text = text.replace(/\</gi, "&lt;");
            text = text.replace(/\>/gi, "&gt;");
            text = text.replace(/ /gi, "&nbsp;");
            text = text.replace(/\n/gi, "<br>");
            $("#content").html(text);
            $("#progress").text((resp.current/resp.size*100).toFixed(2) + "%");
            $(window).scrollTop(0);
            // 先前进，再读这一章节
            if (read == "true") {
                // read 永远是当前章节
                $.get("/api/readbook", {path: path, read: "true", direction: "current", length: readLength}, function (resp) {
                    if (autoForward) {
                        setTimeout(function () {
                            readbook("forward", read);
                        })
                    }
                });
            } 
        })
    }
    $(".read").click(function () {
        autoForward = true;
        readbook("current", "true");
    });

    function readForward() {
        autoForward = false;
        readbook("forward", "false");
    }

    function readBackward() {
        autoForward = false;
        readbook("backward", "false");
    }

    $(".forward").click(readForward);
    $(".backward").click(readBackward);

    readbook("current", "false");

    $(window).on("keyup", function (event) {
        var keyCode = event.keyCode;
        console.log(keyCode);
        switch (keyCode) {
          // shift
          case 16: return;
          case 39: readForward(); break;
          case 37: readBackward(); break;
        }
    })
</script>

{% end %}